<template>
  <Container orientation="vertical" @drop="onColumnDrop($event)" @drop-ready="onDropReady">
    <Draggable v-for="row in items.row" :key="row.id">
      <div class="card-column-header">
        <span class="column-drag-handle">&#x2630;</span>
        {{ row.name }}
      </div>
      <Container orientation="horizontal">
        <Draggable v-for="card in row.col" :key="card.id">
          <div class="card">一个卡片</div>
        </Draggable>
      </Container>
    </Draggable>
  </Container>
</template>

<script>
import { applyDrag, generateItems, lorem } from '../../utils/dndrop'
import { Container, Draggable } from 'vue-dndrop'
export default {
  name: 'Content',
  components: {
    Container,
    Draggable,
  },
  data() {
    const columnNames = ['文章模块', '娱乐模块', '课程模块']
    const items = {
      row: generateItems(3, (i) => ({
        id: `row${i}`,
        type: 'container',
        name: columnNames[i],
        col: generateItems(5, (j) => ({
          id: `${i}${j}`,
        })),
      })),
    }
    return {
      items,
    }
  },
  methods: {
    onDrop(dropResult) {
      console.log('drop result ', dropResult)
    },
    onDropReady(dropResult) {
      console.log('drop ready', dropResult)
    },

    onColumnDrop(dropResult) {
      const items = Object.assign({}, this.items)
      items.row = applyDrag(items.row, dropResult)
      this.items = items
    },

    onCardDrop(columnId, dropResult) {
      if (dropResult.removedIndex !== null || dropResult.addedIndex !== null) {
        const items = Object.assign({}, this.items)
        const col = items.row.filter((p) => p.id === columnId)[0]
        const colIndex = items.row.indexOf(col)

        const newColumn = Object.assign({}, col)
        newColumn.col = applyDrag(newColumn.col, dropResult)
        items.row.splice(columnIndex, 1, newColumn)

        this.items = items
      }
    },
  },
}
</script>

<style scoped>
.card {
  margin: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  width: 150px;
  height: 100px;
}
</style>
